<template>
  <div>
    <ListTab v-model="categoryId" :show-header="!showMobilePage" :tabs="categoryList" is-table @tabClick="switchCategory" />
    <div :class="{'mobile-table mobile-pt mobile-min-height':showMobilePage}" class="report-app-container min-fill-page">
      <div v-if="!showMobilePage" style="display:flex;">
        <div style="display:flex;align-items:center;">
          <span style="font-size:14px;color:#666666;margin-right:10px;">创建时间</span>
          <el-date-picker
            v-model="queryForm.dateTime"
            :unlink-panels="true"
            :clearable="true"
            :editable="false"
            :default-time="['00:00:00', '23:59:59']"
            style="width:240px;"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            format="yyyy/MM/dd HH:mm"
            size="small"
            @change="changeTime"
          />
        </div>
        <div style="flex:1;">
          <SelectionNum :select-item="multipleSelectionAll" style="flex: 1;margin-left:10px;" @clearMixinSelection="clearMixinSelection" />
        </div>
        <div class="opeator-bar" style="display:flex;align-items:center;">
          <el-dropdown v-if="hasCreateAuth" trigger="click">
            <el-button type="primary" class="create-report-button">新建<i class="el-icon-plus el-icon--right"/></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="categoryId !== 'all'" @click.native="tocreateReport('createBaseReport')"><div class="button-icon"><img :src="createBase" alt="">基础报表</div></el-dropdown-item>
              <el-dropdown-item @click.native="tocreateReport('createCollectReport')"><div class="button-icon"><img :src="createCollect" alt="">汇总报表</div></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <btnGroup
            v-if="hasExportAuth || hasUploadAuth"
            ref="btnGroupRef"
            :list="[
              {label:'导入', importApi:'/admin/report/list/upload',extendParams:{categoryId:categoryId === 'all'?'':categoryId}, callback:getData, type: 'import',auth:hasUploadAuth },
              {label:'导出', exportApi:'/admin/report/list/export',format:'zip', exportName:'报表', beforeExport: beforeExport, type: 'export', auth:hasExportAuth},
            ]"
          />
        </div>
      </div>
      <div v-loading="listLoading" class="report-table">
        <u-table
          v-if="reportList.items && reportList.items.length > 0"
          ref="reportTableRef"
          :data="reportList.items"
          :row-class-name="tableRowClassName"
          :height="setTableHeight"
          :border="true"
          :row-height="rowHeight()"
          class="fb-table"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          header-cell-class-name="table-header-cell-nobottom"
          fit
          beautify-table
          header-drag-style
          hightlight-current-row
          @row-click="rowClick"
          @select="selectTable"
          @select-all="selectTable"
        >
          <u-table-column
            align="center"
            type="selection"
            width="80">
            <!-- <template slot-scope="scope">
              <span v-if="scope.row.isStick === 1"/>
            </template> -->
          </u-table-column>
          <u-table-column align="left" label="类型" width="100px" class-name="stick">
            <template slot-scope="scope">
              <span v-if="scope.row.isStick === 1" class="stick-flag">置顶</span>
              <div class="table-type-icon-container">
                <div v-if="scope.row.reportType === 2" :class="{'active': scope.row.reportType === 2}" class="table-type-icon system">系统</div>
                <div v-if="scope.row.reportType === 1" :class="{'active': scope.row.reportType === 1}" class="table-type-icon upload">上传</div>
              </div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="名称" min-width="110px">
            <template slot-scope="scope">
              <el-tooltip v-if="scope.row.name.length > 5" class="item" placement="top" effect="dark">
                <div slot="content" style="max-width: 200px;">{{ scope.row.name }}</div>
                <div class="report-name" >{{ scope.row.name }}</div>
              </el-tooltip>
              <div v-else class="report-name">{{ scope.row.name }}</div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="创建人">
            <template slot-scope="scope">
              <div>{{ scope.row.createUser }}</div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="创建时间" min-width="140px">
            <template slot-scope="scope">
              <div>{{ scope.row.createTime | parseTime('{y}/{m}/{d} {h}:{i}') }}</div>
            </template>
          </u-table-column>
          <u-table-column :width="operateWidth" :align="operateAlign" label="操作">
            <template slot-scope="scope">
              <div v-if="!showMobilePage" class="flex-center">
                <el-button class="btn-mr" type="text" @click="goDetail(scope.row)"><span style="font-size:14px;">查看</span></el-button>
                <el-dropdown v-if="hasEditAuth || hasDeleteAuth">
                  <div class="el-dropdown-link">
                    <el-button type="text"><span style="font-size:14px;">更多<i class="el-icon-arrow-down"/></span></el-button>
                  </div>
                  <el-dropdown-menu slot="dropdown" style="width: 90px;margin-top:-17px;margin-right:15px;padding: 0;">
                    <el-dropdown-item v-if="scope.row.reportType !== 2" style="text-align: center;padding:0;">
                      <ImportButton :extend-params="{id: scope.row.id}" :accept="'.xls,.xlsx'" import-api="admin/report/import/edit" is-diy @complateSetData="complateImport">
                        <div style="width:100%;">导入编辑</div>
                      </ImportButton>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="hasEditAuth" :disabled="!hasEditAuth" style="text-align: center" @click.native="goEdit(scope.row)">
                      <div>编辑</div>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="hasEditAuth" :disabled="!hasEditAuth" style="text-align: center" @click.native="goEdit(scope.row, 1)">
                      <div>引用</div>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="hasEditAuth" :disabled="!hasEditAuth" style="text-align: center" @click.native="stickBtn(scope.row)">
                      <div>{{ scope.row.isStick ? '取消置顶' : '置顶' }}</div>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="hasDeleteAuth" :disabled="!hasDeleteAuth" style="text-align: center" @click.native="deleteBtn(scope.row.id)">
                      <div style="width: 100%;">删除</div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <tableOperateBtn v-else>
                <el-dropdown-item style="width:90px;text-align:center" @click.native="goDetail(scope.row)">
                  <div style="font-size: 14px">查看</div>
                </el-dropdown-item>
                <el-dropdown-item v-if="scope.row.reportType !== 2" style="width:90px;text-align:center">
                  <ImportButton :extend-params="{id: scope.row.id}" :accept="'.xls,.xlsx'" import-api="admin/report/import/edit" is-diy @complateSetData="complateImport">
                    <div style="width:100%;">导入编辑</div>
                  </ImportButton>
                </el-dropdown-item>
                <el-dropdown-item v-if="hasEditAuth" :disabled="!hasEditAuth" style="text-align:center" @click.native="goEdit(scope.row)">
                  <div>编辑</div>
                </el-dropdown-item>
                <el-dropdown-item v-if="hasEditAuth" :disabled="!hasEditAuth" style="text-align:center" @click.native="goEdit(scope.row, 1)">
                  <div>引用</div>
                </el-dropdown-item>
                <el-dropdown-item v-if="hasEditAuth" :disabled="!hasEditAuth" style="text-align:center" @click.native="stickBtn(scope.row)">
                  <div>{{ scope.row.isStick ? '取消置顶' : '置顶' }}</div>
                </el-dropdown-item>
                <el-dropdown-item v-if="hasDeleteAuth" :disabled="!hasDeleteAuth" style="text-align: center" @click.native="deleteBtn(scope.row.id)">
                  <div style="width: 100%;">删除</div>
                </el-dropdown-item>
              </tableOperateBtn>
            </template>
          </u-table-column>
        </u-table>
        <empty-placeholder v-else-if="!reportList.isInit" style="margin-bottom: 24px" />
        <el-row v-if="showMobilePage" type="flex" justify="left">
          <el-pagination
            v-show="reportList.total > 0"
            :current-page.sync="reportList.page"
            :page-size="reportList.perPage"
            :total="reportList.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            :layout="pageLayout"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </el-row>
        <fixed-pagination v-if="reportList.total > 0 && !showMobilePage || showMobilePage">
          <template v-if="showMobilePage">
            <FilterInput
              ref="FilterToolRef"
              v-model="queryForm"
              :filter-list="filterList"
              show-search-btn
              show-mobile-icon
              @handelClick="queryClick"
              @queryEmpty="queryEmpty" />
            <MoreOpeator
              ref="moreOpeatorRef"
              :list="moreOperatorList"
              show-mobile-icon
            />
            <el-dropdown v-if="hasCreateAuth" trigger="click" style="width:100%;">
              <CreateBtn style="width:100%;" mobile-table/>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="categoryId !== 'all'" @click.native="tocreateReport('createBaseReport')"><div class="button-icon"><img :src="createBase" alt="">基础报表</div></el-dropdown-item>
                <el-dropdown-item @click.native="tocreateReport('createCollectReport')"><div class="button-icon"><img :src="createCollect" alt="">汇总报表</div></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template v-else>
            <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
            <div style="flex: 1;" />
            <el-pagination
              v-show="reportList.total > 0"
              :current-page.sync="page"
              :page-size="perPage"
              :total="reportList.total"
              :page-sizes="[20, 50, 100, 250, 500]"
              layout="total, prev, pager, next, sizes, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </template>
        </fixed-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getReportList, getReportCategory, deleteReport, stickReport } from '@/api/reportManage';
import CreateBtn from '@/components/Common/baseComponent/createBtn';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import ListTab from '@/components/ListTab';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
import btnGroup from '@/components/Common/baseComponent/btnGroup';
import ImportButton from '@/components/ImportButton';
import createBase from '@/assets/reportManage/createBase.png';
import createCollect from '@/assets/reportManage/createCollect.png';
import { parseTime } from '@/utils';
import { hasRouteAuth } from '@/utils/permission';
import { paramsRangeFormat } from '@/utils/paramsFormat';
// 跨页选中逻辑
import tableSelections from '@/mixins/tableSelections';
import TableAdaptive from '@/mixins/tableAdaptive';
import mobileTable from '@/mixins/mobileTable';

export default {
  name: 'ReportManage',
  components: {
    CreateBtn, ListTab, MoreOpeator, btnGroup,
    EmptyPlaceholder, ImportButton
  },
  filters: { parseTime },
  mixins: [tableSelections, TableAdaptive, mobileTable],
  data() {
    return {
      createBase, createCollect,
      reportList: {
        isInit: true
      },
      categoryList: [],
      exportData: {
        ids: ''
      },
      listLoading: true,
      page: 1,
      perPage: 20,
      categoryId: 'all',
      queryForm: {
        dateTime: []
      },
      isUmyTable: true,
      issafariBrowser: false,
      tableRefName: 'reportTableRef', // 表格的ref名称
      idKey: 'id' // 唯一表示字段
    };
  },
  computed: {
    hasExportAuth() {
      const categoryId = this.categoryId;
      return this.hasAuth(categoryId, 'export');
    },
    hasUploadAuth() {
      const categoryId = this.categoryId;
      return this.hasAuth(categoryId, 'upload');
    },
    hasCreateAuth() {
      const categoryId = this.categoryId;
      return this.hasAuth(categoryId, 'create');
    },
    hasEditAuth() {
      const categoryId = this.categoryId;
      return this.hasAuth(categoryId, 'edit');
    },
    hasDeleteAuth() {
      const categoryId = this.categoryId;
      return this.hasAuth(categoryId, 'delete');
    },
    tableOutsideHeight() {
      return this.showMobilePage ? 210 : 200;
    },
    filterList() {
      return [{ keyword: 'dateTime', name: '创建时间', labelWidth: '100px', timeType: 'daterange', type: 'rangeDate' }];
    },
    moreOperatorList() {
      return [
        { label: '导入', type: 'import', importApi: '/admin/report/list/upload', extendParams: { categoryId: this.categoryId === 'all' ? '' : this.categoryId }, callback: this.getData, auth: this.hasUploadAuth },
        { label: '导出', type: 'export', exportApi: '/admin/report/list/export', format: 'zip', exportName: '报表', beforeExport: this.beforeExport, auth: this.hasExportAuth }
      ];
    },
    rangeKeyArr() {
      return [{ attr: 'createTime', start: 'createTimeStart', end: 'createTimeEnd', type: 'time', addTime: true }];
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'totalTabelData') {
      to.meta.isChange = true;
    } else {
      to.meta.isChange = false;
    }
    next();
  },
  activated() {
    if (!this.$route.meta.isChange) {
      this.queryForm = { dateTime: [] };
      if (this.clearMixinSelection) this.clearMixinSelection();
      this.initData(true);
    } else {
      if (this.reportList && this.reportList.items && this.reportList.items.length === 0) {
        this.queryForm = { dateTime: [] };
        this.initData(true);
      } else {
        this.initData();
      }
    }
  },
  created() {
    const issafariBrowser = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
    this.issafariBrowser = issafariBrowser;
  },
  methods: {
    creatReportType(reportType) {
      let type = null;
      switch (reportType) {
        case 1:
          type = 'createCollectReport';
          break;
        case 2:
          type = 'createBaseReport';
          break;
        default:
          type = 'createBaseReport';
          break;
      }
      return type;
    },
    hasRouteAuth,
    initData(reset = false) {
      const categoryId = this.$route.query.categoryId || 'all';
      this.categoryId = categoryId;
      if (this.hasRouteAuth('total:report:read') || (categoryId && categoryId !== '' && categoryId !== 'all')) {
        this.getData(reset);
        this.getTab();
      } else {
        this.getTab('noAuth');
      }
    },
    hasAuth(categoryId, type = 'export') {
      let categoryExportAuth = '';
      if (categoryId !== '' && categoryId !== 'all') {
        const activeCategory = this.categoryList.find(i => Number(i.id) === Number(categoryId));
        if (activeCategory.name.indexOf('财务') >= 0 || activeCategory.name.indexOf('销售') >= 0) {
          categoryExportAuth = `total:financereport:${type}`;
        } else if (activeCategory.name.indexOf('内品') >= 0) {
          categoryExportAuth = `total:brandreport:${type}`;
        } else if (activeCategory.name.indexOf('媒介') >= 0) {
          categoryExportAuth = `total:mediumreport:${type}`;
        } else if (activeCategory.name.indexOf('萌力') >= 0) {
          categoryExportAuth = `total:menglireport:${type}`;
        }
      }
      const auth = categoryExportAuth !== '' ? this.hasRouteAuth(categoryExportAuth) : false;
      return this.hasRouteAuth(`total:report:${type}`) || auth;
    },
    async getData(reset = false) {
      if (reset) {
        this.page = 1;
      }
      try {
        const params = _.cloneDeep(this.queryForm);
        params.page = this.page;
        params.perPage = this.perPage;
        paramsRangeFormat(this.rangeKeyArr, params);
        if (this.categoryId && this.categoryId !== '' && this.categoryId !== 'all') params.categoryId = this.categoryId;
        /* if (this.queryForm.dateTime && this.queryForm.dateTime.length === 2) {
          params.startTime = String(this.queryForm.dateTime[0]).length === 13 ? this.queryForm.dateTime[0] / 1000 : this.queryForm.dateTime[0];
          params.endTime = String(this.queryForm.dateTime[1]).length === 13 ? this.queryForm.dateTime[1] / 1000 : this.queryForm.dateTime[1];
        } */
        this.listLoading = true;
        const res = await getReportList(params);
        this.listLoading = false;
        if (res.data) {
          this.reportList = res.data;
          this.reportList.isInit = false;
          window.scrollTo(0, 0);
          if (this.setSelectRow) this.setSelectRow(res.data.items);
        }
      } catch (error) {
        this.reportList = {};
        this.listLoading = false;
        console.error(error);
      }
    },
    changeTime(time) {
      this.getData(true);
    },
    beforeExport() {
      if (this.exportData.ids && this.exportData.ids !== '') {
        this.$refs.btnGroupRef.btnExport(this.exportData);
      } else {
        this.$message({ type: 'warning', message: '请选择需要导出的报表' });
      }
    },
    onErrorExport(msg) {
      // this.$message({ type: 'error', message: msg });
    },
    async getTab(auth) {
      try {
        const res = await getReportCategory();
        if (res.data) {
          this.categoryList = res.data;
          this.categoryList.unshift({ id: 'all', name: '全部' });
          this.categoryList.forEach(i => {
            i.isAuth = this.hasAuth(i.id, 'read');
          });
        }
        if (auth === 'noAuth') {
          for (let i = 0; i < this.categoryList.length; i++) {
            const element = this.categoryList[i];
            if (element.isAuth) {
              this.categoryId = element.id.toString();
              break;
            }
          }
          this.getData();
        }
      } catch (error) {
        console.error(error);
      }
    },
    /**
     * 操作
     */
    // 选择
    tableSelectionChange(data) {
      const ids = [];
      if (data.length) {
        data.forEach(i => {
          ids.push(i.id);
        });
      }
      this.exportData.ids = ids.length > 0 ? ids.join(',') : '';
    },
    // 删除报表
    deleteBtn(id) {
      this.$confirm('是否确定删除该报表', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning',
        customClass: 'del-message del-message-cancel',
        iconClass: 'del-icon'
      }).then(() => {
        deleteReport(id).then(res => {
          this.$message.success('删除成功');
          this.getData();
          if (this.clearMixinSelection) this.clearMixinSelection();
        }, result => {
          if (result.message !== '网络错误！请检查网络状态...') {
            this.$message.error(result.message);
          }
        });
      });
    },
    // 置顶报表
    stickBtn(row) {
      const data = {
        isStick: 1 ^ row.isStick // 0 -> 1
      };
      stickReport(row.id, data).then(res => {
        this.$message.success(`${row.isStick === 1 ? '取消' : '置顶'}成功`);
        this.getData(true);
      }, result => {
        if (result.message !== '网络错误！请检查网络状态...') {
          this.$message.error(result.message);
        }
      });
    },
    switchCategory(item) {
      if (this.clearMixinSelection) this.clearMixinSelection();
      // this.categoryId = item.name || 'all';
      this.getData(true);
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.getData(true);
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.getData();
    },
    goDetail(item) {
      let activeCategory = null;
      if (item.categoryId && item.categoryId !== '' && item.categoryId !== 'all') {
        activeCategory = this.categoryList.find(i => Number(i.id) === Number(item.categoryId));
      } else {
        activeCategory = this.categoryList.find(i => Number(i.id) === Number(this.categoryId));
      }
      const categoryName = activeCategory ? activeCategory.name || '' : '';
      this.$router.push({
        name: 'totalTabelData',
        params: { fileId: item.id },
        query: { name: encodeURIComponent(item.name), categoryName: categoryName, reportType: item.reportType }
      });
    },
    rowClick(row, column, event) {
      if (column.label !== '操作') {
        this.goDetail(row);
      }
    },
    queryEmpty() {
      this.queryForm.dateTime = [];
      this.getData(true);
    },
    goEdit(item, quote = 0) {
      // type :类型，1:上传报表，2：基础报表，3:汇总表，4:系统数据表
      if (Number(item.type) === 2 || item.type === 4) {
        this.$router.push({
          name: 'editBaseReport',
          params: { id: item.id },
          query: {
            categoryId: this.categoryId,
            quote
          }
        });
      } else if (Number(item.type) === 3) {
        this.$router.push({
          name: 'editCollectReport',
          params: { id: item.id },
          query: {
            categoryId: this.categoryId,
            quote
          }
        });
      } else {
        this.$router.push({
          name: 'editBaseReport',
          params: { id: item.id },
          query: {
            sheetId: 0,
            categoryId: this.categoryId,
            quote
          }
        });
      }
    },
    tocreateReport(name, reportId) {
      this.$router.push({
        name,
        query: {
          categoryId: this.categoryId,
          reportId
        }
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (this.multipleSelectionAll && this.multipleSelectionAll.length > 0) {
        const ids = this.multipleSelectionAll.map(i => i.id);
        return ids.includes(row.id) ? 'table-selected' : 'report-table-row';
      }
      return 'report-table-row';
    },
    // 导入编辑
    complateImport(data) {
      this.$message.success('导入成功');
    },
    queryClick() {
      this.getData(true);
    }
  }
};
</script>
<style lang="scss" scoped>
.btn-mr {
  margin-right: 6px;
}
.el-dropdown-link {
  display: block;
  position: relative;
  padding-left:6px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px;
    width: 1px;
    background: #ddd;
    height: 14px;
  }
}
.report-app-container {
  height: calc(100vh - 145px);
  margin: 16px 16px 0 16px;
  // box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
  background-color: #fff;
  padding: 20px 20px 55px 20px;
  .create-report-button {
    width: 80px;
    font-size: 14px;
    padding: 0;
    height: 32px;
    color:#fff;
    margin-right:  16px;
    .el-icon-plus {
      font-size: 14px;
    }
  }
  .report-name {
    font-size:14px;
    font-family:PingFangSC-Medium,PingFang SC;
    line-height:16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    &:hover {
      color: #406EFF;
    }
  }
  & ::v-deep {
    .report-table-row,.table-selected {
      cursor: pointer;
    }
  }
}

.report-table {
  min-height: 300px;
  margin-top: 10px;
  .table-type-icon-container {
    display: flex;
    align-items: center;
    // border-radius: 2px;
    overflow: hidden;
    .table-type-icon {
      border-radius: 2px;
      width:40px;
      height:24px;
      font-size: 12px;
      background:#EBEEFD;
      color: #406EFF;
      line-height: 24px;
      text-align: center;
      &.active {
        background-color: #406EFF;
        color: #FFFFFF;
      }
      &.system {
        background-color: #406EFF;
        color: #FFFFFF;
      }
      &.upload {
        background-color: #EBEEFD;
        color: #406EFF;
      }
    }
  }
  & ::v-deep {
  .table-header-cell-nobottom {
      .el-checkbox {
        margin-left: 0px;
        left: -2px;
      }
      .cell {
        color: #141C3D;
        font-size:14px;
      }
    }
    .u-table-column--selection .cell {
      padding-left: 10px !important;
    }
    .stick {
      .cell {
        overflow: auto!important;
      }
    }
  }
  .page-container {
    text-align: right;
  }
}
.button-icon {
  display: flex;
  align-items: center;
  color: #666666;
  font-size: 14px;
  white-space: nowrap;
  img {
    width: 16px;
    height: 16px;
    margin-right: 12px;
  }
}
.el-popper[x-placement^="bottom"] {
  margin-top: 0;
}
.el-dropdown-menu__item {
  padding: 0 18px;
}
.stick-flag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  height: 40px;
  width: 50px;
  line-height: 24px;
  padding-left: 4px;
  font-size: 12px;
  color: rgb(64, 110, 255);
  background: linear-gradient(-38deg, transparent 50%, #EBEEFD 0);
  border-top-left-radius: 4px;
  transform: translateX(-80px) scale(0.7);
  transform-origin: top left;
}
</style>
<style lang="scss">
.mobile-table {
  td {
    height: 40px !important;
  }
}
</style>
